<template>
    <a-config-provider :locale="zhCN">
        <a-row id="Main" type="flex" ref="MainView">
            <a-col flex="auto" class="UIView">
                <Layout />
            </a-col>
            <a-col flex="400px">
                <a-row type="flex" :gutter="8" class="ButtonGroup">
                    <a-col flex="auto"><a-button block @click="ConfigVisible = true">配置</a-button></a-col>
                    <a-col flex="auto"><a-button block @click="ImportVisible = true">导入</a-button></a-col>
                    <a-col flex="auto"><a-button block>预览</a-button></a-col>
                    <a-col flex="auto"><a-button block @click="ExportPreview">导出</a-button></a-col>
                </a-row>
                <div class="ParamView">
                    <Options />
                </div>
            </a-col>
        </a-row>
        <a-modal v-model:visible="ConfigVisible" title="配置" :width="800" destroyOnClose>
            <ConfigView />
        </a-modal>
        <a-modal v-model:visible="ImportVisible" title="导入" :width="800" destroyOnClose @ok="SetConfig">
            <a-textarea v-model:value="SetConfigValue" :autoSize="{ minRows: 30, maxRows: 30 }"></a-textarea>
        </a-modal>
        <a-modal v-model:visible="ExportVisible" title="导出" :width="800" destroyOnClose @ok="ExportFile" okText="下载文件">
            <a-textarea v-model:value="ExportValue" :autoSize="{ minRows: 30, maxRows: 30 }"></a-textarea>
        </a-modal>
    </a-config-provider>
</template>
<script setup>
import Layout from "./Comp/Layout/index.vue";
import Options from "./Comp/Options/index.vue";
import ConfigView from "./Comp/Options/Config.vue";
import { nextTick, onMounted, ref } from "vue";
import { GetFormOptions } from "./store/FormOptions";
import zhCN from "ant-design-vue/es/locale/zh_CN";
const ConfigVisible = ref(false);
const ImportVisible = ref(false);
const ExportVisible = ref(false);
const SetConfigValue = ref("");
const ExportValue = ref("");
const FormOptions = GetFormOptions();

function SetConfig(val) {
    if (val) {
        var data = JSON.parse(val);
    } else {
        var data = JSON.parse(SetConfigValue.value);
    }
    FormOptions.SetConfig(data);
    nextTick(() => {
        ImportVisible.value = false;
        SetConfigValue.value = "";
    });
}

function ExportPreview() {
    ExportValue.value = JSON.stringify(FormOptions.GetConfig(), null, "  ");
    ExportVisible.value = true;
}

function ExportFile() {
    var aLink = document.createElement("a");
    // 定义BLOB对象，声明文件内容
    var blob = new Blob([JSON.stringify(FormOptions.GetConfig())]);
    // 初始化事件
    aLink.download = "Config.json";
    // 根据上面定义的 BLOB 对象创建文件 dataURL
    aLink.href = URL.createObjectURL(blob);
    // 点击下载
    aLink.click();
}

const MainView = ref();

function handleDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
}

function handleFileSelect(event) {
    event.stopPropagation();
    event.preventDefault();
    var files = event.dataTransfer.files;
    for (var i = 0, f; (f = files[i]); i++) {
        var _File = new FileReader();
        _File.readAsText(f, "UTF-8");
        _File.onload = (e) => {
            SetConfig(e.target.result);
        };
    }
}

onMounted(() => {
    window.addEventListener("dragover", handleDragOver, false);
    window.addEventListener("drop", handleFileSelect, false);
});
</script>
<style scoped>
#Main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.ButtonGroup {
    padding: 8px;
}

.UIView {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.ParamView {
    padding: 0px 8px;
    width: 100%;
    height: calc(100vh - 50px);
    overflow-y: hidden;
    overflow-x: hidden;
}
</style>
